
<div class="container" id="sign-up-container">
  <div id="page-content" >
    <h2 class="text-center mt-4" id="sign-up-text" >Sign up</h2>
      <div class="row justify-centent-center" id="sign-up-form">
        <div class="col-12" id="sign-up-box">
          <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
            <%= render "devise/shared/error_messages", resource: resource %>
              <div class="form-row">
                <div class="form-group col-md-4">
                  <%= f.label :first_name, "First Name" %><br />
                  <%= f.text_field :first_name, autofocus: true, autocomplete: "First Name" %>
                </div>
                        
                <div class="form-group col-md-4">
                  <%= f.label :last_name, "Last Name" %><br />
                  <%= f.text_field :last_name, autocomplete: "Last Name" %>
                </div>
            
              
                <div class="form-group col-md-4">
                  <%= f.label :username, "User Name" %><br />
                  <%= f.text_field :username, autocomplete: "Last Name" %>
                </div>
              </div>

              <div class="form-group">
                <%= f.label :email %><br />
                <%= f.email_field :email,  autocomplete: "email" %>
              </div>

              <div class="form-group">
                <%= f.label :password %>
                <% if @minimum_password_length %>
                <em>(<%= @minimum_password_length %> characters minimum)</em>
                <% end %><br />
                <%= f.password_field :password, autocomplete: "new-password" %>
              </div>

              <div class="form-group">
                <%= f.label :password_confirmation %><br />
                <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
              </div>

              <div class="text-center">
                <%= f.submit "Sign up", class: "btn btn-info" %>
              </div>

        </div>
      </div>
    </div>
  </div>
</div>
<% end %>


